| 直播插件分享 | 您所在的位置：网站首页 › 西瓜播放器 开源 › 直播插件分享 |
直播插件分享
|
「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」 hello，大家好，最近半个月没有更新文章了（忙着写代码了），这两天在写直播那块的时候，发现网上很多插件比如dplayer、vue-video-player、flv.js、video.js等等，都不能在实际项目中很好的用到，要么是浏览器早已经废除的原因，要么是报错得不到解决，好像大家写出来自己的文章，并不关心到底能不能用，像复制粘贴一样，从官方的或者非官方的地方复制过去，一片片文章大同小异，可能是我太菜了，不会实际运用吧。 今天记录一下我用到的这个插件： 西瓜播放器 我是在vue中使用的，所以安装是直接npm install xgplayer。 组件代码新建组件videoPlayer.vue，组件代码： 弹幕 | 发送 import Player from 'xgplayer'; import FlvPlayer from 'xgplayer-flv'; // flv格式 import HlsJsPlayer from 'xgplayer-hls.js'; // M3U8格式 export default { data() { return { videoPlayer: null, barrageValue: '' }; }, props: { cover: '', // 直播封面图 videoSrc:'' }, mounted() { this.getVideo(); }, methods: { getVideo() { this.$nextTick(() => { console.log(this.videoSrc); this.videoPlayer = new FlvPlayer({ el: document.querySelector('#mmid'), url: this.videoSrc, width: '100%', height: '714px', volume: 0.6, // 初始音量 autoplay: false, // 自动播放 playsinline: true, isLive: true, cors: true, poster: this.cover, // 封面图 playbackRate: [0.5, 0.75, 1, 1.5, 2], // 倍速展示 defaultPlaybackRate: 1, danmu: { panel: true, comments: [ //弹幕数组 { duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒) id: '1', //弹幕id，需唯一 start: 3000, //弹幕出现时间，毫秒 prior: true, //该条弹幕优先显示，默认false color: true, //该条弹幕为彩色弹幕，默认false txt: '', //弹幕文字内容 mode: 'top' //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll } ], area: { //弹幕显示区域 start: 0, //区域顶部到播放器顶部所占播放器高度的比例 end: 1 //区域底部到播放器顶部所占播放器高度的比例 }, closeDefaultBtn: false, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关 defaultOff: true //开启此项后弹幕不会初始化，默认初始化弹幕 } }); }); }, // 发送弹幕 save() { if (this.barrageValue) { let id = 0; this.videoPlayer.danmu.sendComment({ //发送弹幕 duration: 15000, id: 'chat' + id++, txt: this.barrageValue, style: { color: '#ffffff', fontSize: '18px', // border: '1px solid #ff9500', borderRadius: '50px', padding: '5px 12px', backgroundColor: 'rgba(255, 255, 255, 0.1)' } }); } } } }; .barrage-box { display: flex; align-items: center; padding: 28px 44px; margin-bottom: 26px; background-color: #282828; .b-text { position: relative; width: 88px; height: 40px; padding-left: 32px; margin-right: 40px; font-size: 18px; color: #f1a475; line-height: 40px; border-radius: 23px; border: 1px solid #f1a475; &::before { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); width: 9px; height: 9px; background: #f1a475; border-radius: 50%; content: ''; } } .input-box { width: 48%; background: #171616; border-radius: 28px; span { padding-left: 14px; &:hover { color: #ffffff; } } } } /deep/ { .el-input__inner { border-color: transparent; background-color: transparent; } .el-input-group__append { padding-right: 30px; border-color: transparent; background-color: transparent; cursor: pointer; } } 复制代码 部分关键字段解释 cover：直播封面图，大家可根据需求自行删减； videoSrc：直播链接地址，后端会返回一个推流的地址给前端这边，这时候一定要问清楚这个地址的格式是什么样的，这次我在联调的时候，因为是第一次写直播功能，后端返回的rtmp格式的，导致一直不能播放，后来询问，发现后端那边是可以根据前端想要的格式返回的，正常的有flv格式的和M3U8格式的，在组件中，我们根据不同的格式进行不同的写法： 播放 m3u8 需要安装 npm install --save xgplayer-hls.js，在组件中就要引入import HlsJsPlayer from 'xgplayer-hls.js'; // M3U8格式播放flv格式的需要安装 npm install --save xgplayer-flv，在组件中就要引入import FlvPlayer from 'xgplayer-flv'; // flv格式 直播中弹幕的功能我是自己写的输入框去发送弹幕的，可以在官方文档中根据字段配置自己想要的样式 还有什么不懂的可以来问我，或者看看官方文档。 |
【本文地址】
公司简介
联系我们